<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>什么是Render函数</title>
</head>
<body>
<!--<div id="app">-->
    <!--<anchor :level="2" title="特性">特性</anchor>-->
    <!--<script type="text/x-template" id="anchor">-->
    <!--<div>-->
        <!--<h1 v-if="level==1">-->
            <!--<a :href="'#'+title">-->
                <!--<slot></slot>-->
            <!--</a>-->
        <!--</h1>-->

        <!--<h2 v-if="level==2">-->
            <!--<a :href="'#'+title">-->
                <!--<slot></slot>-->
            <!--</a>-->
        <!--</h2>-->

        <!--<h3 v-if="level==3">-->
            <!--<a :href="'#'+title">-->
                <!--<slot></slot>-->
            <!--</a>-->
        <!--</h3>-->

        <!--<h4 v-if="level==4">-->
            <!--<a :href="'#'+title">-->
                <!--<slot></slot>-->
            <!--</a>-->
        <!--</h4>-->

        <!--<h5 v-if="level==5">-->
            <!--<a :href="'#'+title">-->
                <!--<slot></slot>-->
            <!--</a>-->
        <!--</h5>-->

        <!--<h6 v-if="level==6">-->
            <!--<a :href="'#'+title">-->
                <!--<slot></slot>-->
            <!--</a>-->
        <!--</h6>-->
    <!--</div>-->
    <!--</script>-->
<!--</div>-->


<div id="app">
    <anchor :level="2" title="特性">特性</anchor>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    // Vue.component('anchor',{
    //     props: {
    //         level: {
    //             type: Number,
    //             required: true
    //         },
    //         title: {
    //             type: String,
    //             default: ''
    //         }
    //     }
    // });
    // var app = new Vue({
    //     el: "#app"
    // })

    Vue.component('anchor',{
        template: "#anchor",
        props: {
            level: {
                type: Number,
                required: true
            },
            title: {
                type: String,
                default: ''
            }
        },
        render: function (createElement) {
            return createElement(
                'h'+this.level,
                [
                    createElement(
                        'a',{
                            domProps: {
                                href: '#'+ this.title
                            }
                        },
                        this.$slots.default
                    )
                ]
            )
        }
    });
    var app = new Vue({
        el: "#app"
    })
</script>
</body>
</html>
